/**
 * 营销活动
 */
var React = require('react-native');
var {View, Text, StyleSheet, TouchableWithoutFeedback, Image, PixelRatio} = React;

/**
 * Usage
 * var {QMMktActivity} = require('qmkit');
 *
 * <QMMktActivityDetail discount={row.marketingList2} cut={row.marketingList3} isDrop={true}/>
 */
var QMMktActivityDetail = React.createClass({
  getInitialState() {
    return {
      /*营销活动-满折-显示更多*/
      mktArray_1_show: false,
      /*营销活动-满折-显示更多*/
      mktArray_2_show: false,
      /*营销活动-满减-显示更多*/
      mktArray_3_show: false
    }
  },

  getDefaultProps() {
    return {
      /*营销活动-满赠*/
      gifts: [],
      /*营销活动-满折*/
      discount: [],
      /*营销活动-满减*/
      cut: [],

      isDrop: true,

      giftSkuList: [],    // 满赠对应的sku列表;
      discountSkuList: [], // 满折对应sku列表;
      cutSkuList: [],    // 满减对应的sku列表;
    }
  },


  render() {
    return (this._renderDropBody());
  },

  _renderDropBody(){
    return (
      <View style={[styles.mktBody, this.props.style]}>
        {
          this.props.discount.length > 0 ? this._renderDropDiscount() : null
        }
        {
          this.props.cut.length > 0 ? this._renderDropCut() : null
        }
        {
          this.props.gifts.length > 0 ? this._renderDropGifts() : null
        }
      </View>
    );
  },


  /**
   * 满赠列表
   */
 _renderDropGifts(){
    return (
      <View style={styles.detailMain}>
        <TouchableWithoutFeedback style={styles.sale} onPress={this._handleOtherMktShow_1}>
          <View style={[styles.saleMain, {justifyContent:'space-between'}]}>
            <View style={styles.saleMain}>
              {this._renderGifts()}
            </View>
            {
              this.props.isDrop ?
                <Image style={styles.arrow}
                       source={ this.state.mktArray_1_show ? require('img/arrow_show.png') : require('img/arrow_hide.png') }/>
                : null
            }
          </View>
        </TouchableWithoutFeedback>
        {this.props.giftSkuList.length > 0 && this.state.mktArray_1_show ? this._getOtherMkt(1) : null}
      </View>
    );
  },
  _renderGifts(){
    return (
      <View style={styles.detailOneLine}>
        <View style={[styles.detailOneLineLabel,styles.labelError]}>
          <Text style={styles.labelTxt}>满赠</Text>
        </View>
        <Text numberOfLines={1} style={styles.detail}>
          {
            this.props.gifts.map((v) => {
              return (
                <Text
                  style={styles.detailOneLineText}> {v}</Text>
              )
            })
          }
        </Text>
      </View>
    );
  },


  /**
   * 满折
   * @returns {XML}
   * @private
   */
    _renderDropDiscount(){
    return (
      <View style={styles.detailMain}>
        <TouchableWithoutFeedback style={styles.sale} onPress={this._handleOtherMktShow_2}>
          <View style={[styles.saleMain, {justifyContent:'space-between'}]}>
            <View style={styles.saleMain}>
              {this._renderDiscount()}
            </View>
          {
            this.props.isDrop ?
              <Image style={styles.arrow}
                     source={ this.state.mktArray_2_show ? require('img/arrow_show.png') : require('img/arrow_hide.png') }/>
              : null
          }
          </View>
        </TouchableWithoutFeedback>
        {this.props.discountSkuList.length > 0 && this.state.mktArray_2_show ? this._getOtherMkt(2) : null}
      </View>
    );
  },
  _renderDiscount(){
    return (
      <View style={styles.detailOneLine}>
        <View style={styles.detailOneLineLabel}>
          <Text style={styles.labelTxt}>满折</Text>
        </View>
        <Text numberOfLines={1} style={styles.detail}>
          {
            this.props.discount.map((v) => {
              return (
                <Text
                  style={styles.detailOneLineText}> {v}</Text>
              )
            })
          }
        </Text>
      </View>
    );
  },

  /**
   * 满减
   * @returns {XML}
   * @private
   */
    _renderDropCut(){
    return (
      <View style={[styles.detailMain]}>
        <TouchableWithoutFeedback style={styles.sale} onPress={this._handleOtherMktShow_3}>
          <View style={[styles.saleMain, {justifyContent:'space-between'}]}>
            <View style={styles.saleMain}>
              {this._renderCut()}
            </View>
          {
            this.props.isDrop ?
              <Image style={styles.arrow}
                     source={ this.state.mktArray_3_show ? require('img/arrow_show.png') : require('img/arrow_hide.png') }/>
              : null
          }
          </View>
        </TouchableWithoutFeedback>
        {this.props.cutSkuList.length > 0 && this.state.mktArray_3_show ? this._getOtherMkt(3) : null}
      </View>
    );
  },
  _renderCut(){
    return (
      <View style={[styles.detailOneLine]}>
        <View style={[styles.detailOneLineLabel,styles.labelWarning]}>
          <Text style={styles.labelTxt}>满减</Text>
        </View>
        <Text numberOfLines={1} style={styles.detail}>
          {
            this.props.cut.map((v) => {
              return (
                <Text
                  numberOfLines={1}
                  style={styles.detailOneLineText}> {v}</Text>
              )
            })
          }
        </Text>
      </View>
    );
  },

  /**
   * 获取剩下的优惠信息
   * @param type
   * @returns {XML}
   * @private
   */
    _getOtherMkt(type) {
    var list = this.props.discountSkuList;
    if (type == 1) {
      list = this.props.giftSkuList;
    } else if (type == 2) {
      list = this.props.discountSkuList;
    } else if (type == 3) {
      list = this.props.cutSkuList;
    }
    return (
      <View style={styles.saleDetail}>
        {
          list.map((v) => {
            return (
              <Text style={[styles.text, styles.black, styles.pt]}>{v}</Text>
            )
          })
        }
      </View>
    );
  },

  /**
   * 显示隐藏更多营销活动
   * @param type
   * @private
   */
    _handleOtherMktShow_1(){
    var show = this.state.mktArray_1_show;
    this.setState({
      mktArray_1_show: !show
    });
  },

    _handleOtherMktShow_2(){
    var show = this.state.mktArray_2_show;
    this.setState({
      mktArray_2_show: !show
    });
  },

  _handleOtherMktShow_3(){
    var show = this.state.mktArray_3_show;
    this.setState({
      mktArray_3_show: !show
    });
  },

});


var styles = StyleSheet.create({
  labelGroup: {
    flexDirection: 'row',
    paddingTop: 5,
    height: 23
  },
  mktOneLineBody: {
    paddingTop: 5,
    paddingRight: 10,
    borderTopWidth: 1 / PixelRatio.get(),
    borderTopColor: '#ebebeb',
  },
  mktBody: {
    paddingTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
    marginBottom: 5,
  },
  label: {
    paddingRight: 8,
    paddingLeft: 8,
    marginLeft: 10,
    height: 18,
    borderRadius: 2,
    justifyContent: 'center',
    alignItems: 'center'
  },

  labelError: {
    backgroundColor: '#fb7574'
  },
  labelInfo: {
    backgroundColor: '#3fb7ea'
  },
  labelWarning: {
    backgroundColor: '#ffc617'
  },
  text: {fontSize: 14,},
  saleDetail: {
    paddingTop: 3,
    paddingLeft: 40,
  },
  saleMain: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  black: {
    marginLeft: 5,
    color: '#bbc1c6',
  },
  detailMain: {
    flex: 1,
  },
  detailOneLineText: {
    fontSize: 14,
    color: '#939495',
  },
  detailOneLineLabel: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingRight: 8,
    paddingLeft: 8,
    height: 18,
    borderRadius: 2,
    backgroundColor: '#3fb7ea',
  },
  labelTxt: {
    fontSize: 12,
    color: '#fff',
  },
  detailOneLine: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: 24,
  },
  sale: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 3,
  },
  grey: {
    fontSize: 14,
    color: '#bbc1c6'
  },
  arrow: {
    width: 9,
    height: 5
  },
  pt: {paddingBottom: 3,},
  detail: { flex: 1, },
});


module.exports = QMMktActivityDetail;
